function ajax(url, el = "") {
  let ul = _c("ul");
  ul.className = "shop-nav";
  $(".container").append(ul);
  fetch(url)
    .then((body) => body.json())
    .then((res) => {
      let div = _c("div");
      res.result.forEach((item) => {
        el += `<li id='${item.titleId}'>${item.title}</li>`;
      });
      div.innerHTML = el;
      ul.appendChild(div);
      ajax2((id = 0), ul);
      ul.addEventListener("click", function (e) {
        let arr = [...e.path].reverse();
        let id = arr[7].getAttribute("id");
        $(ul).parent().find(".shuju").remove();
        ajax2(id, ul);
      });
    });
}

function ajax2(id, ul, el = "") {
  // console.log(ul)
  fetch(`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${id}`)
    .then((body) => body.json())
    .then((res) => {
      let div = _c("div");
      div.className = "shuju";
      res.result.forEach((item) => {
        el += `<li>${item.productImg}
            <p>${item.productName}</p>
            <i>${item.productPrice}</i>
            <h6 class='jing'>${item.productCouponRemain}</h6>
            </li>`;
      });
      div.innerHTML = el;
      $(ul).parent().append(div);
      jing(div);
    });
}

function jing(div) {
  let time = 3000;
  let time2 = 3000 / 100;
  var i = -1;
  $(".jing")
    .find("span")
    .animate({ width: 0 }, 0)
    .animate({ width: 100 }, time);
  window.setInterval(function () {
    //   let text=$('.jing').find('span').text('1')
    if (i < 100) {
      i++;
      $(".jing")
        .find("span")
        .text(i + "%");
    }
  }, time2);
}

ajax("http://chst.vip:1234/api/getbaicaijiatitle?pageid=1");
